<template>
    <h1 align="center">欢迎注册博客园成员</h1>
    <hr>

    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>用户名:</td>
                    <td>
                        <input type="text" v-model="data.name">
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" v-model="data.password">
                    </td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td>
                        <input type="password" v-model="data.password1">
                    </td>
                </tr>

                <tr>
                    <td>请选择城市：</td>
                    <td>
                        <select v-model="data.citys">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in address" :key="item.id">{{ item.name }}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>请选择性别：</td>
                    <td>
                        <input type="radio" name=""  value="1" v-model="data.sex">男
                        <input type="radio" name=""  value="0" v-model="data.sex">女
                        <input type="radio" name=""  value="2" v-model="data.sex">不好说
                    </td>
                </tr>

                <tr>
                    <td>请选择职业：</td>
                    <td>
                        <input type="radio" name=""  value="1" v-model="data.zhiye">学生
                        <input type="radio" name=""  value="2" v-model="data.zhiye">教师
                        <input type="radio" name=""  value="3" v-model="data.zhiye">其他
                    </td>
                </tr>

                <tr>
                    <td>请选择你的爱好</td>
                    <td>
                        <input type="checkbox" name="" value="打篮球" v-model="data.hobby">打篮球
                        <input type="checkbox" name="" value="跑步" v-model="data.hobby">跑步
                        <input type="checkbox" name="" value="阅读" v-model="data.hobby">阅读
                        <input type="checkbox" name="" value="上网" v-model="data.hobby">上网
                    </td>
                </tr>

                <tr>
                    <td>备注：</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="data.beizhu"></textarea>
                    </td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="提交" @click="Add">
                        <input type="reset" value="重置" @click="Add">
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { ref,reactive } from 'vue';
 let address=ref([
    {id:1,name:"北京"},
    {id:2,name:"天津"},
    {id:3,name:"上海"},
    {id:4,name:"河北"},
    {id:5,name:"山西"},
    {id:6,name:"山东"},
 ])

 let data=reactive({
        name:"",
        password:"",
        password1:"",
        citys:"",
        sex:0,
        zhiye:"",
        hobby:[],
        beizhu:[]
    })

const Add=()=>{
    console.log(data);
}






</script>

<style scoped>

</style>